<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>
<table>
    <caption>商品列表</caption>
    <tr>
        <th>商品标签</th>
        <th>商品价格</th>
        <th>商品销量</th>
    </tr>
</table>
<script>
    /* 实例化一个空对象 */
    let p1 = {};
    /* 动态添加属性和方法（Java是不支持的） */
    p1.name = "张三";
    p1.age = 18;
    p1.run = function () {
        console.log(this.name+":"+this.age)
    }
    p1.run();

    /* 实例化一个包含属性和方法的对象 */
    let p2 = {
        name:"李四",
        age:20,
        run:function () {
            console.log(this.name+";"+this.age);
        }
    }
    p2.run();

    /* 常用实例化 */
    let p = {title:"李宁篮球鞋",price:500,saleCount:2000};
    let arr = [
        {title:"匹克拖鞋",price:100,saleCount:220},
        {title:"耐克袜子",price:80,saleCount:2120},
        {title:"李宁篮球鞋",price:500,saleCount:2000},
        {title:"李宁篮球鞋",price:500,saleCount:2000}
    ]

    let t = document.querySelector("table");
    /* 遍历数组 把数组中的商品信息显示到表格里面 */
    for (let product of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let scTd = document.createElement("td");

        titleTd.innerText = product.title;
        priceTd.innerText = product.price;
        scTd.innerText = product.saleCount;

        tr.append(titleTd,priceTd,scTd);

        t.append(tr);
    }
</script>
</body>
</html>